<template>
	<view class="container">
		<view class="lesson">
			<uni-forms ref="form" :model="lesson" labelWidth="80px">
				<uni-forms-item label="教练" name="coachId">
					<uni-data-select v-model="lesson.coachId" :localdata="coachRange" :disabled="true"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="场馆" name="stadiumId">
					<uni-data-select v-model="lesson.stadiumId" :localdata="stadiumRange"
						placeholder="请选择场馆"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="班次" name="classesId">
					<uni-data-select v-model="lesson.classesId" :localdata="classesRange"
						placeholder="请选择班次"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput v-model="lesson.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit"
				style="color:#ffffff;backgroundColor:#993399;borderColor:#993399;">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		listLesson,
		getLesson,
		delLesson,
		addLesson,
		updateLesson
	} from "@/api/puyu/lesson";
	import {
		listAllCoachs
	} from "@/api/puyu/coach";
	import {
		getDicts
	} from "@/api/system/dict/data";

	export default {
		data() {
			return {
				coachList: [],
				puyuClassesOptions: [],
				puyuStadiumOptions: [],
				lesson: {
					coachId: "",
					stadiumId: "",
					classesId: "",
					remark: ""
				},
				rules: {
					coachId: {
						rules: [{
							required: true,
							errorMessage: '教练不能为空'
						}]
					},
					stadiumId: {
						rules: [{
							required: true,
							errorMessage: '场馆不能为空'
						}]
					},
					classesId: {
						rules: [{
							required: true,
							errorMessage: '班次不能为空'
						}]
					}
				}
			}
		},
		computed: {
			coachRange() {
				if (!this.coachList) {
					return [];
				}
				let arr = [];
				this.coachList.map(item => {
					let obj = {
						text: item.coachName,
						value: item.coachId,
					}
					arr.push(obj);
				});
				return arr;
			},
			stadiumRange() {
				if (!this.puyuStadiumOptions) {
					return [];
				}
				let arr = [];
				this.puyuStadiumOptions.map(item => {
					let obj = {
						text: item.dictLabel,
						value: item.dictValue,
					}
					arr.push(obj);
				});
				return arr;
			},
			classesRange() {
				if (!this.puyuClassesOptions) {
					return [];
				}
				let arr = [];
				this.puyuClassesOptions.map(item => {
					let obj = {
						text: item.dictLabel,
						value: item.dictValue,
					}
					arr.push(obj);
				});
				return arr;
			},
		},

		created() {
			this.getCoachList();
		},
		onLoad(option) {
		  const item = JSON.parse(decodeURIComponent(option.item));
		  this.lesson = item;
		  this.lesson.classesId = item.classesId + '';
		  this.lesson.stadiumId = item.stadiumId + '';
		},

		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {

			/** 查询教练用户列表 */
			getCoachList() {
				listAllCoachs().then(response => {
					this.coachList = response.data;
				});
				getDicts("puyu_classes").then(response => {
					this.puyuClassesOptions = response.data;
				});
				getDicts("puyu_stadium").then(response => {
					this.puyuStadiumOptions = response.data;
				});
			},

			changeCoach(e) {
				if (!this.coachList) {
					return;
				}
				let coach = this.coachList.filter(item => item.coachId == e)[0];
				if (coach) {
					this.lesson.userId = coach.userId;
					this.lesson.deptId = coach.deptId;
				}
			},
			submit(ref) {
				this.loading = true;
				this.$refs.form.validate().then(res => {
					updateLesson(this.lesson).then(response => {
						this.$modal.msgSuccess("修改成功!")
						this.loading = false;
						this.$tab.navigateBack();
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.lesson {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>